<script setup lang="ts">
defineOptions({
  name: "JPage",
})
</script>

<template>
  <div>
    <div
        style="
        padding-left: 24px;
        padding-right: 24px;
        margin: -24px -24px 24px;
        background-color: var(--bg-color);
      "
    >
      <div v-if="$slots.content || $slots.extraContent">
        <div style="display: flex; width: 100%">
          <div style="flex: 1 1 auto">
            <slot name="content"/>
          </div>
          <div style="flex: 1 1 auto">
            <slot name="extraContent"/>
          </div>
        </div>
      </div>
      <slot name="footer"/>
    </div>
    <div :class="''">
      <slot/>
    </div>
  </div>
</template>

<style scoped>

</style>
